<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>导航</title>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/config.js"></script>
  <script src="js/message.js"></script>
  <script type="text/javascript">
    var page = 0;
    var total = 0;
    let data = window.sessionStorage.getItem("account");
    let user = JSON.parse(data);
    function someFunction(result) {
      if(result != null) {
        var menuHtml = "";
        for(let m of result.list){
          menuHtml +=
            "<li>" +
            "<div class='item'>" +
            "<a href='" + (m.menuUrl.substring(m.menuUrl.length -4 ,m.menuUrl.length) == "html" ? baseUrl + m.menuUrl : m.menuUrl) + "'><img src='" + baseUrl + m.icon + "' alt=''></a>" +
            "<p><a href='" + (m.menuUrl.substring(m.menuUrl.length -4 ,m.menuUrl.length) == "html" ? baseUrl + m.menuUrl : m.menuUrl) + "'>" + m.menuName + "</a></p>" +
            "</div>" +
            "</li>";
        }
        $("#menuId").html(menuHtml);
        total = result.pages;
        if(total > 1){
          if(page == 1){
            $("#prev").attr("class","prev disable");
            $("#next").attr("class","next active");
          }else if(page == result.pages){
            $("#prev").attr("class","prev active");
            $("#next").attr("class","next disable");
          }else {
            $("#prev").attr("class","prev active");
            $("#next").attr("class","next active");
          }
        } else {
          $("#prev").attr("class","prev disable");
          $("#next").attr("class","next disable");
        }
      }
    }
    function save() {
      alert("请链接指定设备！");
    }
    function flip(b) {
      if(b){
        if(total != 0 && total == page){
          return;
        }
        page++;
      }else{
        if(page == 1){
          return;
        }
        page--;
      }
      let user = JSON.parse(data);
      cashierPost("menu/list.do",{menuType: user.type, type: 1, pageNo: page, pageSize: 9},someFunction);
    }

    //init method one
    $(document).ready(function(){
      $("#account").text("欢迎[" + user.account + "]");
      flip(true)
    });
    $(function(){
      $(".active a").each(function(){
        $(this).hover(function(){
          $(this).css("cursor","pointer");
          $(this).stop();
          $(this).animate({width:90},400,function(){
            $(this).children(".title").css("display","block");
          })
        },function(){
          $(this).stop();
          $(this).children(".title").css("display","none");
          $(this).animate({width:20},400);
        })
      })
    });
  </script>

  <style>
    .item_container {
      padding-top: 50px;
    }

    .item_content ul {
      list-style: none;
    }

    .item_content ul li {
      width: 200px;
      height: 120px;
      float: left;
      margin: 10px
    }

    .item_content {
      width: 740px;
      height: 460px;
      border: 1px solid #FFF;
      margin: 0 auto;
    }

    .item_content .item {
      width: 120px;
      height: 120px;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      background: #FFF;

    }

    .item_content .item {
      width: 120px;
      height: 120px;
      border-radius: 6px;

    }

    .item_content .item img {
      width: 79px;
      height: 79px;
      border-radius: 6px;
    }

    header {
      width: 100%;
      height: 25px;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      background-color: #0099cb;
      padding: 10px;
      overflow: hidden;
      color: #fff;
    }

    header .logo {
      float: left;
      width: 15%;
      border-right: 1px solid #fff;
    }

    header .mingc {
      width: 65%;
      font-size: 20px;
      text-align: center;
      float: left;
      padding-right: 10px;
    }

    header .out {
      float: right;
      width: 15%;
      border-right: 1px solid #fff;
    }
    /* next prev btn*/
    .npbtn{padding:10px 30px 20px 30px;height:60px;width:300px;margin:20px auto;}
    .disable{background:#EBEBEB;
      border-radius:30px;
      -moz-border-radius:30px;
      -webkit-border-radius:30px;}
    .prev{float:left;}
    .next{float:right;}
    .next,.prev{padding:0 20px 0 0;height:40px;background-position:right -348px;position:relative;text-shadow:0 1px transparent}
    .next .title{padding:11px 38px 0 0;right:0;}
    .prev .title{padding:11px 26px 0 0;right:0;}
    .cap{width:20px;height:40px;display:block;background-position:left -282px;}
    .title{display:none;position:absolute;top:0;color:#fff;font-size:16px;}
    .arrow{width:40px;height:40px;position:absolute;top:0;}
    .prev .arrow{left:0;background-position:0px 0px;}
    .next .arrow{right:0;background-position:0px -40px;}
    .active{
      background-color:#3F9CDE;
      border-radius:30px;
      -moz-border-radius:30px;
      -webkit-border-radius:30px;
    }
    .active a{display:block;}
    .active a:hover{text-decoration:none;}
  </style>

</head>

<body>
<header>
  <div class="logo">
    菜单导航
  </div>
  <div class="mingc" id="account">
  </div>
  <div class="out">
    <a href="home.html" style="color: #ffffff;">退出</a>
    <a href="javascript:void(0);" style="color: #ffffff;" onclick="closePage()">关闭</a>
  </div>
</header>
<div class="item_container">
  <div class="item_content">
    <ul id="menuId">
    </ul>
  </div>
  <div class="npbtn">
    <div id="prev" class="prev active"><a href="javascript:flip(false)"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
    <div id="next" class="next active"><a href="javascript:flip(true)"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></a></div>
  </div>
</div>

</body>
</html>
<script type="application/javascript">
  function btn() {
    function Pointer(x, y) {
      this.x = x;
      this.y = y;
    }

    function Position(left, top) {
      this.left = left;
      this.top = top;
    }

    $(".item_content .item").each(function (i) {
      this.init = function () { // 初始化
        this.box = $(this).parent();
        $(this).attr("index", i).css({
          position: "absolute",
          left: this.box.offset().left,
          top: this.box.offset().top
        }).appendTo(".item_content");
        this.drag();
      },
        this.move = function (callback) {  // 移动
          $(this).stop(true).animate({
            left: this.box.offset().left,
            top: this.box.offset().top
          }, 500, function () {
            if (callback) {
              callback.call(this);
            }
          });
        },
        this.collisionCheck = function () {
          var currentItem = this;
          var direction = null;
          $(this).siblings(".item").each(function () {
            if (
              currentItem.pointer.x > this.box.offset().left &&
              currentItem.pointer.y > this.box.offset().top &&
              (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
              (currentItem.pointer.y < this.box.offset().top + this.box.height())
            ) {
              // 返回对象和方向
              if (currentItem.box.offset().top < this.box.offset().top) {
                direction = "down";
              } else if (currentItem.box.offset().top > this.box.offset().top) {
                direction = "up";
              } else {
                direction = "normal";
              }
              this.swap(currentItem, direction);
            }
          });
        },
        this.swap = function (currentItem, direction) { // 交换位置
          if (this.moveing) return false;
          var directions = {
            normal: function () {
              var saveBox = this.box;
              this.box = currentItem.box;
              currentItem.box = saveBox;
              this.move();
              $(this).attr("index", this.box.index());
              $(currentItem).attr("index", currentItem.box.index());
            },
            down: function () {
              // 移到上方
              var box = this.box;
              var node = this;
              var startIndex = currentItem.box.index();
              var endIndex = node.box.index();
              ;
              for (var i = endIndex; i > startIndex; i--) {
                var prevNode = $(".item_content .item[index=" + (i - 1) + "]")[0];
                node.box = prevNode.box;
                $(node).attr("index", node.box.index());
                node.move();
                node = prevNode;
              }
              currentItem.box = box;
              $(currentItem).attr("index", box.index());
            },
            up: function () {
              // 移到上方
              var box = this.box;
              var node = this;
              var startIndex = node.box.index();
              var endIndex = currentItem.box.index();
              ;
              for (var i = startIndex; i < endIndex; i++) {
                var nextNode = $(".item_content .item[index=" + (i + 1) + "]")[0];
                node.box = nextNode.box;
                $(node).attr("index", node.box.index());
                node.move();
                node = nextNode;
              }
              currentItem.box = box;
              $(currentItem).attr("index", box.index());
            }
          }
          directions[direction].call(this);
        },
        this.drag = function () { // 拖拽
          var oldPosition = new Position();
          var oldPointer = new Pointer();
          var isDrag = false;
          var currentItem = null;
          $(this).mousedown(function (e) {
            e.preventDefault();
            oldPosition.left = $(this).position().left;
            oldPosition.top = $(this).position().top;
            oldPointer.x = e.clientX;
            oldPointer.y = e.clientY;
            isDrag = true;

            currentItem = this;

          });
          $(document).mousemove(function (e) {
            var currentPointer = new Pointer(e.clientX, e.clientY);
            if (!isDrag) return false;
            $(currentItem).css({
              "opacity": "0.8",
              "z-index": 999
            });
            var left = currentPointer.x - oldPointer.x + oldPosition.left;
            var top = currentPointer.y - oldPointer.y + oldPosition.top;
            $(currentItem).css({
              left: left,
              top: top
            });
            currentItem.pointer = currentPointer;
            // 开始交换位置

            currentItem.collisionCheck();


          });
          $(document).mouseup(function () {
            if (!isDrag) return false;
            isDrag = false;
            currentItem.move(function () {
              $(this).css({
                "opacity": "1",
                "z-index": 0
              });
            });
          });
        }
      this.init();
    });
  }
  function closePage(){
      if(navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Chrome") != -1){
          window.location.href = "about:blank";
          window.close();
      }else{
          window.opener = null;
          window.open("", "_self");
          window.close();
      }

  }
</script>